@page "/AnchoredRegion"

@using FluentUI.Demo.Shared.Pages.AnchoredRegion.Examples

<h1>Anchored region</h1>

<p>
    An <em>anchored region</em> is a container component which enables authors to create layouts where the contents of the anchored region can be positioned relative to another "anchor" element.  Additionally, the <em>anchored region</em> can react to the available space between the anchor and a parent <a href="https://developer.mozilla.org/en-US/docs/Glossary/viewport" target="_blank" rel="noopener noreferrer">"viewport"</a> element such that the region is placed on the side of the anchor with the most available space, or even resize itself based on that space.
</p>
<p>
    <code>&lt;FluentAnchoredRegion&gt;</code> wraps the <code>&lt;fluent-anchored-region&gt;</code> element, a web component implementation of an anchored region leveraging the Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Fixed" Component="@typeof(AnchoredRegionFixed)"></DemoSection>

<DemoSection Title="Dynamic (default)" Component="@typeof(AnchoredRegionDynamic)">
    <Description>
        The anchored region (the yellow block) is anchored to the button. It will dynamically position itself based on the available space.
    </Description>
</DemoSection>


<DemoSection Title="Locked to default" Component="@typeof(AnchoredRegionLockToDefault)">
    <Description>
        Each region is anchored to the button with a specific lock position.
    </Description>
</DemoSection>

<DemoSection Title="Scaling via update" Component="@typeof(AnchoredRegionScalingUpdate)"></DemoSection>

<DemoSection Title="Scaling via offset" Component="@typeof(AnchoredRegionScalingOffset)"></DemoSection>

<DemoSection Title="Inset" Component="@typeof(AnchoredRegionInset)"></DemoSection>

<DemoSection Title="Thresholds" Component="@typeof(AnchoredRegionThresholds)"></DemoSection>

<DemoSection Title="Toggle anchor" Component="@typeof(AnchoredRegionToggle)"></DemoSection>

<DemoSection Title="Toggle position and size" Component="@typeof(AnchoredRegionTogglePosition)"></DemoSection>

<DemoSection Title="RTL Dynamic" Component="@typeof(AnchoredRegionRTLDynamic)"></DemoSection>

<DemoSection Title="Size to Anchor" Component="@typeof(AnchoredRegionSizeToAnchor)"></DemoSection>

<DemoSection Title="RTL Fill" Component="@typeof(AnchoredRegionRTLFill)"></DemoSection>

<DemoSection Title="Start & End" Component="@typeof(AnchoredRegionStartAndEnd)"></DemoSection>

<DemoSection Title="RTL Start & End" Component="@typeof(AnchoredRegionRTLStartAndEnd)"></DemoSection>

<DemoSection Title="Add to fixed region" Component="@typeof(AnchoredRegionAddToFixed)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentAnchoredRegion)" />
